<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	<!--
		Step #3
			- 배너 정보의 개수 파악
			
	 	Step #2
	 		- jQuery, Ajax 개발 환경 설정
	 		
		Step #1
			- 배너 목록을 JSON 포맷으로 생성
	-->
	<style>
		#banner_container{
			position:relative;
			width:128px;
			
			height:128px;
			border:1px solid #cccccc;
			top:100px;
			left:100px;
			overflow:hidden;;
			
		}
		
		#banner_container div{
			position:absolute;
			width:128px;
			height:128px;
			
			top:0;
			background:#ffffff;
		}
		
		
	</style>
	
	<script  type="text/javascript" src="../libs/jquery-1.7.1.min.js"></script>
	<script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
	<script type="text/javascript">    
	
		var ANIMATION_DURATION = 500;
		var IMAGE_HEIGHT = 128;
		
		var $bannerItems;	
		var $bannerContainer;
		
		var nCurrentIndex;
		var nBannerCount;
		var nTimerID;
		
		window.onload = function(){
			/*
				 기존 내용을 모두 없애 줍니다.
				// 요소 초기화.	
				this.init();
				// 배너 위치 설정하기.
				this.setBannerPosition();
				// 배너 움직이기.
				this.startMove();
			*/	
			this.startLoadFile();
			
		}
		
		function startLoadFile(){
			// 1. 브라우저에 따른 XMLHttpRequest생성하기.
			xmlHttp = createXMLHTTPObject();
			
			// 2. 요청에 대한 응답처리 이벤트 리스너 등록.
			xmlHttp.onreadystatechange=on_ReadyStateChange;
			
			// 3.서버로 보낼 데이터 생성.
			
			// 4. GET 방식으로 데이터 보내기, 응답은 비동기로 클라이언트<->서버간의 연결 요청준비.
			xmlHttp.open("GET", "banner.json", true);
			
			// 5. 실제 데이터 전송.
			xmlHttp.send(null);
		}
		
		// 1. 브라우저에 따른 XMLHttpRequest생성하기.
		function createXMLHTTPObject(){
			var xhr	= null;
			if (window.XMLHttpRequest) {
				// IE7버전 이상, Chrome, Safari, Firefox, opera등 거의 대부분의 브라우저에서는
				// XMLHttpRequest객체를 제공합니다.
				xhr = new XMLHttpRequest();
			}
			else {
				// IE6,IE5 버전에서는 아래와 같이 XMLHttpRequest객체를 생성해야 합니다.
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
				
			return xhr;
		}
			
			
		// 6.응답처리.
		function on_ReadyStateChange(){
			// 4=데이터 전송 완료.(0=초기화전,1=로딩중,2=로딩됨,3=대화상태)
			if(xmlHttp.readyState==4){
				//200은 에러 없음.(404=페이지가 존재하지 않음)
				if(xmlHttp.status==200){
			
					//7. 데이터 파싱처리.
					createImages(xmlHttp.responseText);
				}
				else{
					alert("처리중 에러가 발생했습니다.");
				}
			}
		}
		
		//7. JSON 포멧 데이터 처리
		function createImages(strInfo){		
			//1. JSON 포멧 문자열을 JavaScript Object로 변경시키기.
			var objBannerInfo = eval("("+strInfo+")"); 
	
			var banners = objBannerInfo.rows;		
			alert("배너 정보 노드 갯수는 ? "+banners.length); 
	
		}
		
		
		// 요소 초기화.	
		function init(){
			// 계속해서 사용할 요소들이기 때문에 전역변수에 담아 둡니다.
			this.$bannerContainer = document.getElementById("#banner_container");
			this.$bannerItems = $("#banner_container div");
			this.nCurrentIndex = 0;
			this.nTimerID = 0;	
			// 전체 배너 갯수.
			this.nBannerCount = this.$bannerItems.length;
		
		}
	
		// 현재배너와 다음배너의 위치를 초기화 시켜 줍니다.
		function setBannerPosition(){
			// 모든 배너의 위치값을 출력화면 영역에서 보이지 않도록 만든다. 
			this.$bannerItems.css({opacity:0, top:IMAGE_HEIGHT});	
			
			// 첫번째 배너=현재 버너를 화면에 활성화 시켜준다.
			this.$bannerItems.eq(0).css({opacity:1, top:0});
		}
		
		// 배너 움직이기.
		function startMove(){			
			this.nTimerID = setInterval(this.on_StartMove,1000)	
		}	
		
		// 다음 배너 계산하기.	
		function on_StartMove(){
			if(this.nCurrentIndex+1>=this.nBannerCount)
				this.showBannerAt(0);
			else
				this.showBannerAt(this.nCurrentIndex+1);			
		}
	
		// nIndex에 해당하는 배너를 현재배너로 활성화시킴.
		function showBannerAt(nIndex){
			if(this.nCurrentIndex==nIndex || nIndex<0 || nIndex>=this.nBannerCount)
				return;
			
			// 현재배너를 구한다.
			var $currentBanner = this.$bannerItems.eq(this.nCurrentIndex);
			// 다음배너를 구한다.
			var $nextBanner = this.$bannerItems.eq(nIndex);
			
			// 현재배너를 위쪽으로 움직이기.
			$currentBanner.animate({top:-IMAGE_HEIGHT,opacit:0},
				ANIMATION_DURATION,
				"easeOutQuint"
			);
					
			// 다음배너를 움직이기 전에, 다음배너위치의 시작위치 설정하기.
			$nextBanner.css({top:IMAGE_HEIGHT, opacity:0});
			
			$nextBanner.animate({top:0,opacity:1},
				ANIMATION_DURATION,
				"easeOutQuint"
			);
			
			// 현재배너 index값을 업데이트 시켜준다.
			this.nCurrentIndex = nIndex;
		}
	</script> 
</head>

<body>
	<div id="banner_container" >
      	 
	</div>    
</body>
</html>



